<layout name="Public/layout"/>

<div class="pad20 bgf">
    <div class="tit1 clear">
        <span class="left txt-left txt-blue1"><i class="fa fa-wrench"></i>奖项列表</span>
        <div class="right ">
            <a href="#" id="openAdd"><span class="txt-blue">添加 <i class="fa fa-plus-circle"></i></span></a>
        </div>
    </div>
    <div class="table-responsive mart20 sale-table" style="overflow-x: inherit">
        <table class="table table-bordered table-striped">
            <tr>
                <!--<td width="5%">编号</td>-->
                <td width="30%"><strong>奖项</strong></td>
                <td width="30%"><strong>奖品</strong></td>
                <td width="20%"><strong>中奖名额</strong></td>
                <td><strong>操作</strong></td>
            </tr>
            <volist name="lotteryList" id="lottery">
                <tr>
                    <td class="hidden lotteryId"><span >{$lottery.id}</span></td>
                    <td><span >{$lottery.lotteryname}</span></td>
                    <td><span>{$lottery.prize}</span></td>
                    <td><span>{$lottery.num}</span></td>

                    <td><a class="openEdit" href="#"><span >编辑</span></a><a href="#"><span class="text-danger"  style="padding-left:10px;">删除</span></a></td>
                </tr>

            </volist>
        </table>

        <div style="padding-right:20px;text-align:center">{$vPage}</div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1"  aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加奖项
                </h4>
            </div>
            <div class="modal-body">
                <form role="form" id="lotteryForm" method="post" action="" enctype="multipart/form-data">
                    <input style="display: none" name="id" id="lotteryId">
                    <div class="form-group">
                        <label for="lottery">奖项:</label>
                        <input type="text" class="form-control" id="lottery" placeholder="请输入奖项" name="lotteryName">
                    </div>
                    <div class="form-group">
                        <label for="prize">奖品:</label>
                        <input type="text" class="form-control" id="prize" placeholder="奖品" name="prize">
                    </div>

                    <div class="form-group">
                        <label for="num">中奖名额:</label>
                        <input type="text" class="form-control" id="num" placeholder="中奖名额" name="num">
                    </div>

                    <div class="form-group" >
                        <input name="lotteryUser" class="hidden" id="lotteryUser">

                        <div class="col-md-4 ">
                            <span>签到用户</span>
                            <ul class="list-group userListHeight">
                                <volist name="userList" id="user">
                                    <li class="list-group-item userListItem" id="{$user.uniqid}">{$user.name}</li>
                                </volist>
                            </ul>
                        </div>

                        <div class="col-md-4">
                            <span>虚拟用户</span>
                            <ul class="list-group userListHeight">
                                <volist name="vUserList" id="vUser">
                                    <li class="list-group-item vUserListItem" id="{$vUser.uniqid}">{$vUser.name}</li>
                                </volist>
                            </ul>
                        </div>

                        <div class="col-md-4">
                            <span>已选中奖用户</span>
                            <ul class="list-group userListHeight" id="lotteryUserList">

                            </ul>

                        </div>
                        <div style="clear:left"></div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="addLotteryBtn">
                    保存
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    $(function(){
        var lotteryUserList = new Array();
        var lastAddNum = {$lastNum};
        var lastEditNum = 0;
        function clearLotteryForm(){
            lotteryUserList.splice(0,lotteryUserList.length);
            $("#lotteryUserList").empty();
            $("#lotteryForm")[0].reset();
        }
        $(".list-group-item").dblclick(function(){
            var me = this;
            $.getJSON("{:U('Admin/Index/checkLotteryUser')}",{uniqid:$(this).attr("id")},function(data){
                if(!data){
                    var num = $("#num").val();
                    if(!checkPositiveNumber(num)){
                        alert("中奖名额无效");
                    }else if(num == lotteryUserList.length){
                        alert("中奖用户数量已达到中奖名额");
                    }
                    else if(lotteryUserList.indexOf($(me).attr("id")) != -1){
                        alert("当前奖项已经添加该用户");
                    }else{
                        lotteryUserList.push($(me).attr("id"));
                        $("#lotteryUserList").append($(me).prop("outerHTML"));
                    }
                }else{
                    alert("其它奖项已设置该用户");
                }
            });


        });

        $("#lotteryUserList").on("dblclick","li",function(){
            var index = lotteryUserList.indexOf($(this).attr("id"));
            lotteryUserList.splice(index,1);
            $(this).remove();
        });

        $("#addLotteryBtn").click(function(){
            if(!$("#lottery").val()){
                alert('奖项名称不能为空');
            }else if(!$("#prize").val()){
                alert("奖品不能空");
            }else if(!checkPositiveNumber($("#num").val())){
                alert("中奖名额值无效");
            }else if(!$("#lotteryId").val() && $("#num").val() > lastAddNum) {
                alert("中奖名额不能大于剩余用户量");
            }else if($("#lotteryId").val() && $("#num").val() > lastEditNum) {

                alert("中奖名额不能大于剩余用户量");
            }else {
                console.log(lotteryUserList.toString());
                $("#lotteryUser").val(lotteryUserList.toString());
                $("#lotteryForm").submit();
            }

        });

        $(".openEdit").click(function(){
            clearLotteryForm();
            $("#myModalLabel").text('编辑奖项');
            var lotteryId = $(this).parent().siblings(".lotteryId").text();
            $.getJSON("{:U('Admin/Index/getLotteryById')}",{id:lotteryId},function(data){
                if(data){
                    console.log(data);
                    $("#lotteryId").val(data.id);
                    $("#lottery").val(data.lotteryname);
                    $("#prize").val(data.prize);
                    $("#num").val(data.num);
                    lastEditNum = lastAddNum + parseInt(data.num);
                    if(data.lotteryuser){
                        var lotteryUserArray = data.lotteryuser.split(',');

                        if(lotteryUserArray){
                            for(var i = 0;i < lotteryUserArray.length;i++){
                                lotteryUserList.push(lotteryUserArray[i]);
                                $("#lotteryUserList").append($("#"+lotteryUserArray[i]).prop("outerHTML"));
                            }
                        }
                    }
                    $("#myModal").modal("show");
                }

            });

        });

        $("#openAdd").click(function(){
            $("#myModalLabel").text('添加奖项');
            clearLotteryForm();
            $("#myModal").modal("show");
        });



    })
</script>